<template>
    <div>
        <header>
            <img :src="userInfo.avatar" alt="" />
            <section @click="goLogin">{{userInfo.username}}</section>
            <van-icon :name="isLogin?'cross':'arrow'" @click="logOut"></van-icon>
        </header>
        <van-grid square :column-num="3">
            <van-grid-item v-for="(item,index) in arr" :key="index" :icon="item.icon" :text="item.text"
                @click="goFavPage(item.text)" />
        </van-grid>
        <div class="modal" v-show="ifShow">
            <div class="modal_bg" @click="modalClick"></div>
            <div class="modal_content">
                <van-form @submit="onSubmit">
                    <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名(未注册过将视为直接注册)"
                        :rules="[{ required: true, message: '请填写用户名' }]" />
                    <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                    <div style="margin: 16px;">
                        <van-button round block type="danger" native-type="submit">提交</van-button>
                    </div>
                    <div class="copyright">Copyright © <span>零灯枣狼</span> 2021</div>
                </van-form>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        LoginApi
    } from '@/request/api';
    export default {

        data() {
            return {
                // 用户信息
                userInfo: {
                    avatar: require("../assets/images/user.png"),
                    username: "点击登录"
                },
                // 判断用户是否有登录
                isLogin: localStorage.getItem('token'),
                // 登录框的用户名和密码
                username: '',
                password: '',
                ifShow: false, // modal显示隐藏
                arr: [{
                        icon: "label-o",
                        text: "我的订单"
                    },
                    {
                        icon: "bill-o",
                        text: "优惠券"
                    },
                    {
                        icon: "goods-collect-o",
                        text: "礼品卡"
                    },
                    {
                        icon: "location-o",
                        text: "我的收藏"
                    },
                    {
                        icon: "flag-o",
                        text: "我的足迹"
                    },
                    {
                        icon: "contact",
                        text: "会员福利"
                    },
                    {
                        icon: "aim",
                        text: "地址管理"
                    },
                    {
                        icon: "warn-o",
                        text: "账号安全"
                    },
                    {
                        icon: "service-o",
                        text: "联系客服"
                    },
                    {
                        icon: "question-o",
                        text: "帮助中心"
                    },
                    {
                        icon: "smile-comment-o",
                        text: "意见反馈"
                    },
                ]

            }
        },
        created() {
            let token = localStorage.getItem("token");
            if (token) {
                // 渲染userInfo
                let myUserInfo = localStorage.getItem('userInfo')
                this.userInfo = JSON.parse(myUserInfo) //反序列化
            }
        },

        methods: {
            // 跳转收藏页面
            goFavPage(val) {
                if (val == "我的收藏") {
                    this.$router.push("/favourite")
                }

            },

            goLogin() {
                // 如果有登录，就什么都不做
                let token = localStorage.getItem("token");
                if (!token) {
                    this.ifShow = true;
                }
            },
            modalClick() {
                this.ifShow = false;
            },
            // 表单提交
            onSubmit(values) {
                LoginApi({
                    username: values["用户名"],
                    pwd: values["密码"],
                }).then((res) => {
                    console.log(res);
                    if (res.errno === 0) {
                        // 成功
                        // 存储token, 保存用户信息
                        let {
                            token,
                            userInfo
                        } = res.data;
                        this.userInfo = userInfo;
                        // console.log(this.userInfo);
                        // console.log(JSON.stringify(userInfo));
                        // console.log(JSON.parse(localStorage.getItem('userInfo')));
                        // localStorage永久存储
                        localStorage.setItem("token", token);
                        localStorage.setItem("userInfo", JSON.stringify(userInfo));
                        // 登录框消失
                        this.ifShow = false;
                        // 图标变×
                        this.isLogin = true;
                    } else {
                        // 抛出错误给用户看
                        this.$toast(res.errmsg)
                    }
                });
            },
            // 退出登录（先判断是否已登录）
            logOut() {
                let token = localStorage.getItem("token");
                if (token) {
                    // 清除localStorage
                    localStorage.removeItem("token", "userInfo");
                    this.$router.go(0);
                }
            }
        },
    };
</script>

<style lang="less" scoped>
    header {
        background: rgb(51, 51, 51);
        padding: 20px 10px;
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;

        img {
            width: 75px;
            border-radius: 50%;
        }

        section {
            flex: 1;
            margin-left: 10px;
        }
    }

    .modal {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 66;

        .modal_bg {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
        }

        .modal_content {
            width: 90%;
            height: 200px;
            background: #fff;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;

            .copyright{
                text-align: center;
                color: #999;
                span{
                    color: #333;
                }
            }   
        }
    }

    
</style>